<template>
    <h2>显示借款信息</h2>
    <select v-model="id">
                    <option value="0">--请选择--</option>
                    <option v-for="item in bind" :value="item.Iid">{{ item.Iyear }}年利息{{ item.Ilx }}%</option> 
                </select>
    <input type="button" value="查询" @click="Show" >
    <table class="table table-bordered">
        <thead>
            <tr>
            <th>借款名称</th>
            <th>借款最高年限</th>
            <th>借款最高额度</th>
            <th>借款介绍</th>
            <th>借款利息</th>
            <th>月还款金额</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
            
        <tr v-for="item in info">
            <th>{{ item.BM_Name }}</th>
            <th>{{ item.BM_Year }}</th>
            <th>{{ item.Mb_Money }}</th>
            <th>{{ item.BM_Info }}</th>
            <th>{{ item.BMI_Id }}</th>
            <th>{{ item.Mb_Money*item.BM_Year/100/12 }}</th>
            <th>
                <a href="#" @click="Del(item.Iid)">删除</a>
                
            </th>
        </tr>
        </tbody>
    </table>
    <span>
        总共有{{page.listCount}}条记录，当前是第{{page.pageIndex}}页，每页显示{{page.pageSize}}条记录，总共{{page.pageCount}}页
        </span>
        <a href="#" @click="pages('first')">首页</a>
        <a href="#" @click="pages('up')">上一页</a>
        <a href="#" @click="pages('down')">下一页</a>
        <a href="#" @click="pages('last')">尾页</a>
</template>
<script setup lang="ts">
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

const router = useRouter();

onMounted(() => {
    bindInfo();
})

const bind = ref({
    BMI_Id:0,
    BMI_Year:0,
    BMI_Interest:0
})

const bindInfo = () => {
    axios.get('http://localhost:58004/api/Borrow/Bind'
    , bind.value)
    .then(res => {
        bind.value = res.data;
        console.log(bind.value);
    })
    
    .catch(err => {
        console.log(err);
    })
}


const pages = (msg:string) =>{
    switch(msg)
    {
        case 'first':
            page.value.pageIndex=1;
            break;
        case 'last':
            page.value.pageIndex=page.value.pageCount;
            break;
        case 'up':
            if(page.value.pageIndex>1)
            {
                page.value.pageIndex--;
            }
            else
            {
                alert("已经是第一页了")
                return;
            }
            break;
            case 'down':
            if(page.value.pageIndex<page.value.pageCount)
            {
                page.value.pageIndex++;
            }
            else
            { 
                alert("已经是最后一页了")
                return;
            }
            break;
            
        
    }
            Show();
}

onMounted(() => {
    Show();
})

const info = ref({
    BM_Name: '',
    BM_Year: '',
    Mb_Money: '',
    BM_Info: '',
    BMI_Id:0,
    BMI_Year:0,
    BMI_Interest:0,
    BM_Id:0,

})

const page =ref({
    pageIndex: 1,
    pageSize: 2,
    listCount: 0,
    pageCount:0,
})

const id = ref(0);



const Show = () => {
    axios.get('http://localhost:58004/api/Borrow/Show'
    , {
        params: {
            id:id.value,
            pageIndex: page.value.pageIndex,
            pageSize: page.value.pageSize,
        }
    })
    .then(res => {
        info.value = res.data.Plist;
        page.value.listCount = res.data.listCount;
        page.value.pageCount = res.data.pageCount;
        console.log(page.value.pageCount);
        console.log(page.value.listCount);
        console.log(info.value);
    })
    
    .catch(err => {
        console.log(err);
    })
}






</script>